﻿@inherits Vowei.Web.G18nWebViewPage<System.Collections.Generic.IEnumerable<Vowei.Data.Models.Statistics.RequirementWorks>>
@using Vowei.Web.Helpers

<div class="statistics">
    <script type="text/javascript">
        function generate_req_desc(requirement) {
            return '<a href="/Requirements/Details/' + requirement.ID + '">' + requirement.Title + '</a>';
        };
        
        var data = @Html.Raw((string)ViewData[Vowei.Web.Helpers.ViewHelpers.JsonObjectKey]);
        var columnWidth = 20,
            w = data.length * (columnWidth) + 50,
            h = 300,
            columnBottom = h / 2,
            x = pv.Scale.linear(0, data.length).range(0, w);
            y = pv.Scale.linear(0, 20).range(0, h),
            yStep = 10,
            xStep = 25;

        var panel = new pv.Panel().width(w)
                          .height(h);
        var column = panel.add(pv.Bar)
                       .data(data)
                       .bottom(columnBottom)
                       .width(columnWidth)
                       .height(function(d) {return d.ActiceTasksCount * yStep})
                       .left(function() {return this.index * xStep})
                       .fillStyle("blue")
                       .text(function(d) {return d.ActiceTasksCount});

        column.anchor("bottom").add(pv.Label)
           .text(function () { return data[this.index].Requirement.Title})
           .textAlign("left")
           .textBaseline("middle")
           .textAngle(Math.PI / 4)
           .bottom(columnBottom);

        column = panel.add(pv.Bar)
                   .data(data)
                   .bottom(function(d) { return (d.ActiceTasksCount * yStep) + columnBottom })
                   .width(columnWidth)
                   .height(function(d) { return d.ClosedTasksCount * yStep })
                   .left(function() { return this.index * xStep})
                   .fillStyle("red")
                   .text(function(d) { return d.ClosedTasksCount});
        
        panel.render();                    
    </script>
</div>